<script setup>
import { ref } from 'vue'
import { fetchCityData } from '../api/weatherAPI'
//引入状态管理
import { useCityStore } from '../stores/cityStore'

const city = ref('') //数据，用于页面与api中的联系
//获取store实例
const cityStore = useCityStore()

//调用根据城市名称来获取数据的函数
function request() {
  getData(city.value)
}
//根据城市名称获取城市位置数据
async function getData(cityName) {
  const res = await fetchCityData(cityName) //调用api模块化封装的函数
  console.log(res)
  // console.log('更新状态前：')
  // console.log(cityStore.location)
  cityStore.updateLocation(res.location[0]) //调用状态管理中的action方法：更新
  // console.log('更新状态后：')
  // console.log(cityStore.location)
}
</script>


<template>
  <div>
    <input type="search" placeholder="请输入城市名称" v-model="city" @change="request()" />
  </div>
</template>

<style scoped>
</style>